/* 做题评估 */
.container {
  width: 1200px;
  margin: 80px auto 0;
  padding-bottom: 80px;
  ::v-deep .el-breadcrumb__inner.is-link {
    font-weight: normal;
    color: #333;
  }
  ::v-deep .el-breadcrumb__inner.is-link:hover {
    color: #0193ff;
  }
  ::v-deep .el-breadcrumb__inner a:hover {
    color: #0193ff;
  }
  .commonTit {
    font-size: $size-common;
    color: $color-black;
    font-weight: 550;
    padding-bottom: 23px;
    border-bottom: 1px solid #eee;
    text-align: left;
  }
  .accuracy {
    display: flex;
    justify-content: space-between;
    margin: 21px 0;
    text-align: center;
    .left {
      width: 270px;
      height: 370px;
      box-sizing: border-box;
      background-color: #ffffff;
      box-shadow: 0px 0px 8px 0px rgba(231, 231, 231, 0.55);
      border-radius: 5px;
      padding: 30px 38px;
      .el-progress {
        margin: 41px 0 33px;
      }
      .instru {
        // width: 173px;
        display: flex;
        justify-content: space-between;
        p {
          font-size: 14px;
          color: $color-black;
          text-indent: 19px;
          position: relative;
          &::after {
            content: '';
            width: 14px;
            height: 14px;
            background: #0193ff;
            position: absolute;
            top: 3px;
            left: 0;
          }
          &:last-child {
            &::after {
              background: #e6eff6;
            }
          }
        }
      }
    }
    .right {
      width: 908px;
      box-sizing: border-box;
      height: 370px;
      background-color: #ffffff;
      box-shadow: 0px 0px 8px 0px rgba(231, 231, 231, 0.55);
      border-radius: 5px;
      padding: 30px 45px 0;
      position: relative;
      // 滚动条样式
      &::-webkit-scrollbar {
        width: 8px;
      }
      // 滚动槽
      &::-webkit-scrollbar-track {
        border-radius: 4px;
        background: #f2f2f2;
      }
      // 滚动滑块
      &::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background: #b4bbc5;
      }
      .commonTit {
        margin-bottom: 17px;
      }
      .subjects {
        max-height: 224px;
        overflow-y: auto;
        padding-right: 10px;
        // 滚动条样式
        &::-webkit-scrollbar {
          width: 8px;
        }
        // 滚动槽
        &::-webkit-scrollbar-track {
          border-radius: 4px;
          background: #f2f2f2;
        }
        // 滚动滑块
        &::-webkit-scrollbar-thumb {
          border-radius: 4px;
          background: #b4bbc5;
        }
        .item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 12px;
          border-bottom: 1px dashed #eee;
          margin-bottom: 14px;
          .name {
            width: 260px;
            font-size: 14px;
            color: $color-black;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .rightInfo {
            display: flex;
            align-items: center;
            p {
              font-size: $size-common;
              color: #666;
              width: 100px;
              margin-right: 33px;
              span {
                color: #0193ff;
                font-weight: 550;
              }
            }
            a {
              width: 102px;
              height: 28px;
              background-color: #0193ff;
              border-radius: 14px;
              font-size: $size-common;
              color: $color-white;
              text-align: center;
              line-height: 28px;
            }
          }
        }
      }
      .more {
        font-size: $size-common;
        color: #0193ff;
        position: absolute;
        top: auto;
        left: 50%;
        bottom: 25px;
        transform: translateX(-50%);
        cursor: pointer;
      }
    }
  }
  .testSituation {
    width: 1200px;
    height: 357px;
    background-color: #ffffff;
    box-shadow: 0px 0px 8px 0px rgba(231, 231, 231, 0.55);
    border-radius: 5px;
    padding: 29px 44px 0;
    box-sizing: border-box;
    margin-top: 20px;
    .table {
      max-height: 219px;
      overflow-y: auto;
      padding-right: 10px;
      margin-top: 30px;
      // 滚动条样式
      &::-webkit-scrollbar {
        width: 8px;
      }
      // 滚动槽
      &::-webkit-scrollbar-track {
        border-radius: 4px;
        background: #f2f2f2;
      }
      // 滚动滑块
      &::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background: #b4bbc5;
      }
      ::v-deep .el-table th.el-table__cell {
        color: $color-black;
        background: #fafafa !important;
      }
      ::v-deep .el-table .cell {
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      ::v-deep
        .el-table
        .el-table__row
        td.el-table__cell:nth-child(2n + 2)
        .cell {
        text-align: left !important;
      }
      ::v-deep
        .el-table
        .el-table__row
        td.el-table__cell:nth-child(4n + 4)
        .cell {
        text-align: center !important;
      }
      .tableIndex {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background-color: #e6eff6;
        font-size: 16px;
        color: #60b0ed;
        text-align: center;
        line-height: 26px;
        margin: 0 auto;
      }
      .toInfo {
        color: #0193ff;
        font-size: $size-common;
        text-align: center;
        cursor: pointer;
      }
    }
  }
  .knowledgeRank {
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
    .knowledges {
      box-sizing: border-box;
      width: 800px;
      height: 567px;
      background-color: #ffffff;
      box-shadow: 0px 0px 8px 0px rgba(231, 231, 231, 0.55);
      border-radius: 5px;
      padding: 29px 44px 0;
      position: relative;
      .collapse {
        max-height: 405px;
        overflow-y: auto;
        padding-right: 10px;
        margin-top: 23px;
        // 滚动条样式
        &::-webkit-scrollbar {
          width: 8px;
        }
        // 滚动槽
        &::-webkit-scrollbar-track {
          border-radius: 4px;
          background: #f2f2f2;
        }
        // 滚动滑块
        &::-webkit-scrollbar-thumb {
          border-radius: 4px;
          background: #b4bbc5;
        }
        .collapseItem {
          margin-bottom: 19px;
          .tit {
            display: flex;
            justify-content: space-between;
            align-items: center;
            p {
              font-size: 14px;
              color: $color-black;
              font-weight: 550;
            }
          }
          .innerCollapse {
            margin-top: 16px;
            border-radius: 10px;
            padding: 0;
            .item {
              .innerTit {
                height: 50px;
                background: #f9f9f9;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 39px 0 20px;
                font-size: 14px;
                color: $color-black;
                cursor: pointer;
                p {
                  max-width: 500px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                span {
                  color: #60b0ed;
                }
              }
              .childList {
                max-height: 500px;
                background-color: #ffffff;
                border-radius: 5px;
                padding: 20px 59px 0px 39px;
                overflow-y: auto;
                // 滚动条样式
                &::-webkit-scrollbar {
                  width: 10px;
                }
                // 滚动槽
                &::-webkit-scrollbar-track {
                  border-radius: 10px;
                  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                }
                // 滚动滑块
                &::-webkit-scrollbar-thumb {
                  border-radius: 10px;
                  background: rgba(0, 0, 0, 0.1);
                  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                }
                .itemCon {
                  // display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-bottom: 22px;
                  .left {
                    display: flex;
                    align-items: center;
                    p {
                      font-size: 14px;
                      color: $color-black;
                    }
                  }
                  .right {
                    display: flex;
                    align-items: center;
                    a {
                      display: inline-block;
                      width: 67px;
                      height: 24px;
                      background-color: #0193ff;
                      border-radius: 5px;
                      color: $color-white;
                      font-size: $size-common;
                      text-align: center;
                      line-height: 24px;
                      box-sizing: border-box;
                      &:last-child {
                        border: solid 1px #0193ff;
                        background: $color-white;
                        color: #0193ff;
                        margin-left: 20px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .more {
        position: absolute;
        top: auto;
        left: 50%;
        bottom: 30px;
        transform: translateX(-50%);
        font-size: $size-common;
        color: #60b0ed;
      }
    }
    .rank {
      width: 377px;
      height: 567px;
      box-sizing: border-box;
      background-color: #ffffff;
      box-shadow: 0px 0px 8px 0px rgba(231, 231, 231, 0.55);
      border-radius: 5px;
      padding: 29px 15px 20px 25px;
      .list {
        max-height: 450px;
        overflow-y: auto;
        padding-right: 8px;
        margin-top: 24px;
        // 滚动条样式
        &::-webkit-scrollbar {
          width: 10px;
        }
        // 滚动槽
        &::-webkit-scrollbar-track {
          border-radius: 10px;
          background: #f2f2f2;
          // box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        }
        // 滚动滑块
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background: #b4bbc5;
          // box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        }
        .item {
          display: flex;
          align-items: center;
          padding-bottom: 20px;
          border-bottom: 1px solid #eaeaea;
          margin-bottom: 20px;
          position: relative;
          &.isMe {
            .text {
              width: 150px;
            }
          }
          .rankNum {
            width: 43px;
            height: 43px;
            background-color: #f5f5f5;
            border-radius: 15px 15px 0px 15px;
            border: solid 1px #cccccc;
            display: flex;
            justify-content: center;
            align-items: center;
            .inner {
              width: 31px;
              height: 31px;
              border-radius: 10px 10px 0px 10px;
              border: solid 1px #cccccc;
              text-align: center;
              line-height: 31px;
              font-size: 14px;
              color: #999;
            }
            &.rankTop {
              border-width: 0;
              background: none;
              font-size: 20px;
              color: #666;
              .inner {
                border-width: 0;
              }
            }
          }
          // .ranking{
          // }
          .avatar {
            width: 57px;
            height: 57px;
            border-radius: 50%;
            margin: 0 14px 0 14px;
            background-color: #7fb9e5;
          }
          .text {
            width: 168px;
            p {
              font-size: 14px;
              color: #444546;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              &:last-child {
                color: #999;
                margin-top: 15px;
              }
            }
          }
          .isMe {
            width: 36px;
            height: 20px;
            background-color: #0193ff;
            border-radius: 3px;
            font-size: 14px;
            color: $color-white;
            text-align: center;
            line-height: 20px;
            position: absolute;
            top: 0;
            left: auto;
            right: 7px;
          }
        }
      }
    }
  }
  .rankDialog {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    .innerCon {
      width: 520px;
      height: 388px;
      overflow: auto;
      background: url('@/assets/images/rankBg.png') no-repeat center;
      background-size: cover;
      border-radius: 10px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 30px 15px 0px 30px;
      .tit {
        font-size: 18px;
        color: $color-black;
        font-weight: 550;
        text-align: center;
      }
      .list {
        max-height: 287px;
        overflow-y: auto;
        padding-right: 10px;
        margin-top: 20px;
        // 滚动条样式
        &::-webkit-scrollbar {
          width: 10px;
        }
        // 滚动槽
        &::-webkit-scrollbar-track {
          border-radius: 10px;
          background: #f2f2f2;
          // box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        }
        // 滚动滑块
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background: #b4bbc5;
          // box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        }
        .item {
          height: 73px;
          background-color: #f0f7f3;
          border-radius: 5px;
          border: solid 1px #60b0ed;
          display: flex;
          align-items: center;
          padding: 0 10px;
          // margin-bottom: 15px;
          .rankNum {
            width: 35px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          &.isMe {
            .rankNum {
              background-color: #f5f5f5;
              border-radius: 15px 15px 0px 15px;
              border: solid 1px #cccccc;
              .inner {
                width: 25px;
                height: 25px;
                border-radius: 10px 10px 0px 10px;
                border: solid 1px #cccccc;
                text-align: center;
                line-height: 25px;
                font-size: 14px;
                color: #999;
              }
            }
          }
          .avatar {
            width: 50px;
            height: 50px;
            background-color: #7fb9e5;
            border-radius: 50%;
            margin: 0 10px;
          }
          .info {
            p {
              font-size: 14px;
              color: #444564;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              &:last-child {
                color: #999;
                margin-top: 10px;
              }
            }
          }
        }
      }
      .closeBtn {
        position: absolute;
        top: 19px;
        left: auto;
        right: 23px;
        cursor: pointer;
      }
    }
  }
}
